<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./font/iconfont.css" type="text/css" rel="stylesheet" />
    <style>
      body {
        margin: 0;
      }

      ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }

      h1 {
        margin: 0;
      }

      #menu {
        width: 100%;
        background-color: #2d4373;
        /* border: 1px solid green; */
        min-width: 400px;
        /* 阻止外边距重叠 */
        overflow: hidden;
      }
      #menu h1 {
        height: 80px;
        line-height: 80px;
        background-color: #3b5998;
        text-align: center;
        font-size: 32px;
        color: #fff;
      }
      #menu ul li {
        margin: 6px 8px 0;
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: #3b5998;
      }
      #menu ul li a {
        text-decoration: none;
        color: #fff;
        font-size: 12px;
      }
      #menu form {
        position: relative;
        height: 48px;
        margin: 8px;
        line-height: 48px;
      }
      #menu form input {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        text-align: center;
        background-color: #cbd9f5;
      }

      #menu button {
        position: absolute;
        top: 0;
        right: 0;
        width: 72px;
        height: 48px;
        outline: none;
        border: 0;
        background-color: transparent;
        font-size: 24px;
        color: #a0b3d9;
      }

      @media (min-width: 768px) {
        #menu h1 {
          float: left;
          width: 40%;
          height: 44px;
          line-height: 44px;
          font-size: 20px;
        }
        #menu ul {
          float: left;
          width: 60%;
          height: 44px;
        }
        #menu ul li {
          float: left;
          width: 33.3333%;
          height: 44px;
          line-height: 44px;
          margin: 0;
          border-radius: 0;
        }
        #menu form {
          float: left;
          width: 100%;
          height: 64px;
          padding: 8px;
          margin: 0;
          box-sizing: border-box;
        }
        #menu form input {
          font-size: 16px;
        }
        #menu form button {
          top: 8px;
          right: 8px;
        }
      }
      @media (min-width: 992px) {
        #menu {
          width: 100%;
          overflow: hidden;
          background-color: #3b5998;
        }
        #menu h1 {
          width: 33.3333%;
          height: 36px;
          line-height: 36px;
          margin: 0;
          font-size: 24px;
          color: #fff;
          text-align: center;
        }
        #menu ul {
          width: 33.3333%;
          margin: 0;
        }
        #menu ul li {
          width: 33.3333%;
          height: 36px;
          line-height: 36px;
        }
        #menu form {
          position: relative;
          width: 33.3333%;
          height: 36px;
          line-height: 36px;
          padding: 3px;
        }
        #menu form input {
          border: 0;
          font-size: 14px;
        }
        #menu form button {
          position: absolute;
          top: -3px;
          right: -3px;
          font-size: 20px;
        }
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <h1>IBiji.tech</h1>
      <ul>
        <li>
          <a href="#">系列教程</a>
        </li>
        <li>
          <a href="#">实例教程</a>
        </li>
        <li>
          <a href="#">工具推荐</a>
        </li>
      </ul>
      <form action="" method="post">
        <input type="text" placeholder="分享技术成就你我!" />
        <button class="iconfont">&#xe628;</button>
      </form>
    </div>
  </body>
</html>
